<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库盘点</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<div id="app">
    <el-button type="primary" @click="popen">选择盘点仓</el-button>
    <template>
        <el-table
                :data="tableData"
                height="500"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="盘点编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称">
            </el-table-column>
            <el-table-column
                    prop="znumber"
                    label="账面数量">
            </el-table-column>
            <el-table-column
                    prop="snumber"
                    label="真实数量">
                <template slot-scope="{ row, $index }">
                    <el-input type="text" @input="calculate(row)" v-model="row.snumber"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="yknumber"
                    label="变化量">
                <template slot-scope="{ row, $index }">
                    <el-input type="text" disabled v-model="row.yknumber"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="stateid"
                    label="状态">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.stateid == 0 ? '已盘点' : '未盘点'}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="盘点时间">
            </el-table-column>
        </el-table>
        <div style="margin-top: 10px;display: flex;">
            <el-button type="primary" style="margin-left: auto;margin-right:22px;" @click="add" round>确定</el-button>
            <el-button type="danger" style="margin-right:70px;" @click="res" round>取消</el-button>
        </div>

    </template>
    <template>
        <el-dialog
                title="提示"
                :visible.sync="panFing"
                width="30%">
            <template>
                <el-form>
                    <el-form-item label="盘点单号">
                        <el-input type="text" v-model="number"></el-input>
                    </el-form-item>
                    <el-form-item label="选择仓库">
                        <el-select v-model="a" placeholder="请选择">
                            <el-option label="零件仓库" :value="1"></el-option>
                            <el-option label="产品仓库" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
    <el-button @click="panFing = false">取 消</el-button>
    <el-button type="primary" @click="search">确 定</el-button>
  </span>
        </el-dialog>
    </template>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            panFing: false,
            a: '',
            pandata: {},
            number: '',
            snumber: '',
            yknumber: '',
            aanum: '',
            multipleSelection: [],
            isChecked: false
        },
        methods: {
            search() {
                //查询
                axios.get("/pandian/search?a=" + this.a)
                    .then(({data}) => {
                        this.panFing = false;
                        let updatedData = [];
                        if (this.a != null && this.a != undefined) {


                            if (this.a == 1) {
                                data.data.forEach(item => {
                                    // 对于每一个 item，创建一个新的对象，并更新其属性
                                    let updatedItem = {
                                        number: this.number, // 设置 number 属性
                                        name: item.wareName, // 设置 name 属性
                                        znumber: item.wareNumber // 设置 znumber 属性
                                    };
                                    // 将更新后的对象添加到新的数组中
                                    updatedData.push(updatedItem);
                                });
                            } else {
                                data.data.forEach(item => {
                                    // 对于每一个 item，创建一个新的对象，并更新其属性
                                    let updatedItem = {
                                        number: this.number, // 设置 number 属性
                                        name: item.proName, // 设置 name 属性
                                        znumber: item.proNumber // 设置 znumber 属性
                                    };
                                    // 将更新后的对象添加到新的数组中
                                    updatedData.push(updatedItem);
                                });
                            }
                        }
                        // 外层循环结束后，用新的数组替换 this.tableData
                        this.tableData = updatedData;
                    })
            },
            //计算
            calculate(row) {
                row.yknumber = Number(row.snumber - row.znumber);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //打开盘点选择仓
            popen() {
                this.panFing = true;
            },
            res() {
                this.tableData = [];
                this.search();
            },
            add() {
                const promises = this.multipleSelection.map(item => {
                    return axios.post("/pandian/addlist", item)
                        .then(response => {
                            // 处理每个请求的响应，比如更新状态或收集数据
                            // 注意：这里你使用的是 data 而不是 datas
                            return response.data;
                        });
                });
                // 使用 Promise.all 等待所有请求完成
                return Promise.all(promises)
                    .then(allData => {
                        // 当所有请求都完成时，这里会执行
                        // allData 是一个数组，包含了每个请求的响应数据
                        // 假设你想要在所有请求完成后显示一个通用的消息
                        this.$message({
                            message: '盘点计划提交成功', // 根据需要修改消息内容
                            type: 'success' // 或者其他类型，根据你的逻辑来决定
                        });
                    })
                    .catch(error => {
                        // 如果有任何一个请求失败，这里会执行
                        this.$message({
                            message: '盘点计划提交失败', // 具体的错误消息可以根据 error 对象来获取
                            type: 'error'
                        });
                    });
            }
        }
    })
</script>
</body>
</html>